import React, { useState, useCallback, useMemo, useRef } from 'react';
import { connect } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { AreaNumManageAPI } from '../common/type';
import { SchemaManage } from '@/components/SchemaComponent';
import { getManageSearchColumns, getManageTableColumns } from '../mconfig';
import { AreaNumUpdateView } from './UpdateView';
import { AreaNumManageService } from '../service';

/** 行政区域管理页面 */
const AreaNumManageView: React.FC<AreaNumManageAPI.IManageType> = ({
  permissions,
}) => {
  const schemaManageRef: any = useRef();

  const [updateFlag, setUpdateFlag] = useState<boolean>(false);

  /** 行政区域新增或编辑模态框显示变量 */
  const [showFlag, setShowFlag] = useState<boolean>(false);

  /** 选中数据表格行数据 */
  const [checkedRows, setCheckedRows] = useState<Record<string, any>>({});

  const onRequest = useCallback(
    (updateFlag: boolean) => {
      if (updateFlag) {
        const initRequest = {
          current: 1,
          pageSize: 10,
          sort: 'provinceCode',
        };
        onReset(initRequest);
        setUpdateFlag(false);
      } else {
        areaNumrefresh();
      }
    },
    [updateFlag],
  );

  const onCloseModal = useCallback(
    (showModel: boolean) => {
      setShowFlag(showModel);
    },
    [updateFlag],
  );

  /** 获取管理页面上下文内容 */
  const { loading, pagination, data, refreshRequest, areaNumrefresh } =
    AreaNumManageService(permissions);

  /** 点击搜索提交按钮 */
  const onSearch = (requestParams: AreaNumManageAPI.ITableRequestType) => {
    refreshRequest(requestParams);
  };

  /** 点击搜索重置按钮 */
  const onReset = (requestParams: any) => {
    refreshRequest(requestParams);
  };

  /** 点击分页操作 */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    refreshRequest({ pageSize, current, ...params });
  };

  /** 管理页面头部操作集合 */
  const getSearchOperateFuncs: AreaNumManageAPI.IHeaderActionType =
    useMemo(() => {
      return [
        {
          title: '添加',
          visible: permissions?.['/areaNumController/add'] ?? false,
          type: 'primary',
          icon: <PlusOutlined />,
          onClick: () => {
            setShowFlag(true);
          },
        },
      ];
    }, [permissions]);

  /** 数据表格操作集合 */
  const getTableOperateFuncs: AreaNumManageAPI.ITableActionType = {
    onEdit: (record) => {
      setShowFlag(true);
      setCheckedRows(record);
    },
  };

  /** 获取数据表格数据列 */
  const getTableColumns: Record<string, any>[] = useMemo(() => {
    return getManageTableColumns(permissions, getTableOperateFuncs);
  }, [permissions]);

  return (
    <>
      <SchemaManage
        ref={schemaManageRef}
        searchProps={{
          switchList: [],
          searchList: getManageSearchColumns(),
          onSwitch: () => {},
          onReset,
          onSearch,
        }}
        actionList={getSearchOperateFuncs}
        tableProps={{
          columns: getTableColumns,
          dataSource: data?.rows,
          loading: loading,
          pagination: pagination as any,
          rowKey: 'id',
          onPageChange: onPageChange,
        }}
      />
      {showFlag && (
        <AreaNumUpdateView
          checkedRows={checkedRows}
          onRequest={() => {
            onRequest(false);
          }}
          onClose={() => {
            onCloseModal(false);
          }}
        />
      )}
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  permissions: baseLogin?.permissions,
  navTab,
}))(AreaNumManageView);
